<template>
  <div class="container">
    <div v-for="item in treeData" :key="item.id" class="out-box">
      <div v-if="item.checked" class="flex justify-between solid-border padding5">
        <span>{{ item.title || ' ' }}</span>
        <span v-if="!item.children.length" class="font-bold">{{ item.field || item.field == 0 ? excelData[item.field] : '' }}</span>
      </div>
      <div v-for="child in item.children" :key="child.id" class="in-box">
        <div
          v-if="item.checked && child.title && (child.field || child.field == 0) && excelData[child.field]"
          class="flex justify-between padding5 solid-border"
        >
          <span>{{ child.title }}</span>
          <span v-if="!child.children.length" class="font-bold">{{ child.field || child.field == 0 ? excelData[child.field] : '' }}</span>
        </div>
        <div style="background-color: #f9fafc">
          <MobilePreview :tree-data="child.children" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getStorage } from '@/utils/tools'
  export default {
    name: 'MobilePreview',
    components: {},
    props: {
      treeData: {
        type: Array,
        default: () => {},
      },
    },
    data() {
      return {
        excelData: getStorage('excelData')?.body[0],
      }
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .container {
    color: #a2a2a2;
  }
  .solid-border {
    border-bottom: 1px solid #f3f4f5;
  }
  .padding5 {
    padding: 10px 5px;
  }
  .in-box {
  }
</style>
